<template>
	<view class="">

		<u-toast ref="uToast" />

		<u-popup mode="bottom" v-model="show" border-radius="14" @close="close">

			<view class="u-padding-20">
				<view class="u-flex">
					<view>
						<u-image :src="info.cover" width="158" height="158"></u-image>
					</view>
					<view class="u-margin-left-20" style="width: 520rpx;">
						<view class="u-font-lg u-line-2">
							{{info.goodsName}}
						</view>
						<view class="u-flex u-row-between" style="align-items: center;">
							<view>
								<text
									style="color:#FF6450;font-size: 36rpx;">￥{{statusing==5?info.ptPrice:info.price}}</text>
								<text
									style="color:#999999;font-size: 24rpx;margin-left: 10rpx;text-decoration: line-through;">￥{{info.linePrice}}</text>
							</view>
							<view class="" style="color:#999999;font-size: 24rpx;" v-if="statusing!==4">
								仅剩{{info.sku}}件
							</view>
						</view>
					</view>
				</view>



				<view class=" " v-if="info.spec.length">
					<view v-for="(item,index) in info.spec" :key="index">
						<view style="color: #333;font-size: 32rpx;font-weight: bold;margin: 20rpx 0;">{{item.name}}
						</view>
						<view class="u-flex">
							<view v-for="(item1,index1) in item.child" :key="index1" class="btn"
								:class="item.current==index1?'change':''" @click="cbtnList(index1,index)">
								{{item1.value}}
							</view>
						</view>
					</view>
				</view>

				<view class="" style="margin: 20rpx 0;" v-if="statusing!==4">
					<view class="u-flex u-row-between">
						<view style="color: #333;font-size: 32rpx;font-weight: bold;">商品数量</view>
						<view>
							<u-number-box :max="info.max?info.max-info.meBuyCount:99" v-model="value"
								@change="valChange" bg-color="#628DFF" color="#fff" min="1">
							</u-number-box>
						</view>
					</view>

					<view v-if="info.max"
						style="color: #FF6450;display: flex;justify-content: flex-end;margin-top: 20rpx;">
						该商品您当前限购{{info.max-info.meBuyCount}}件</view>
				</view>


				<view>
					<u-button shape="circle" :custom-style="{background:'#FF6450',color:'#fff',marginTop:'40rpx'}"
						@click="submit" :ripple="true" :disabled="btndisabled">确认</u-button>
				</view>



			</view>

		</u-popup>
	</view>
</template>

<script>
	import {
		mapGetters,
		mapMutations,
		mapState,
	} from 'vuex';
	export default {
		computed: {
			...mapState(["info"]),
			
			
		},
		data() {
			return {

				show: false,
				btndisabled:true,
				value: 1,
				selecting: "",
				statusing: "",
				IsImmediate:'', //加入购物车还是立即购买
			}
		},
	
		watch:{
			info:{
				immediate: true,
				handler(v) {
					if(!v.spec.length){
						this.btndisabled=false;
					}
				}
			}
		},

		methods: {

			// 检测是否全部选中
			checkSize() {
				let spec = this.info.spec;
				let arr = [];
				if (spec.findIndex(item => item.current == -1)) {
					console.log(111)
					spec.map(item => {
						arr.push(item.child[item.current].id);
					})
					let reslut = this.info.item.filter(item => item.specValueIds == arr.join(","));
					this.info.linePrice=reslut[0].linePrice;
					this.info.id=reslut[0].goodsId;
					this.info.sku=reslut[0].sku;
					this.info.price=reslut[0].price;
					this.info.goodsId=reslut[0].id;
					this.btndisabled=false;
					console.log(this.info,reslut)
				}
			},
			close() {
				this.show = false
			},
			cbtnList(index1, index) {
				this.$set(this.info.spec[index], "current", index1);
				this.$forceUpdate()
				this.checkSize()
			},
			valChange(e) {
				console.log('当前值为: ' + e.value)
			},
			submit() {
				
				// 加入购物车逻辑
				if(this.IsImmediate=='add'){
					this.$u.post('/indent/cartAdd', {
						goods_id: this.info.id,
						goods_item_id: this.info.goodsId,
						num: this.value,
					}, {}).then(res => {
						this.$refs.uToast.show({
							title: '加入购物车成功',
							type: 'success',
						})
						this.show = false;
						this.$parent.carnum()
					}).catch(err => {})
					
				}
				// 立即购买
				if(this.IsImmediate=='buy'){
					uni.navigateTo({
						url:"/pages/sure_book/index?id="+this.info.id+"&goodsId="+this.info.goodsId+"&num="+this.value
					})
					
				}
				
				
			},
			//拼团
			ptt() {
				this.$u.post('/api/indent/affirm', {
					goods_id: this.info.id,
					goods_spec_id: this.$parent.Sid,
					num: this.value,
					pt: 1
				}, {}).then(res => {
					uni.redirectTo({
						url: "../../pages/sure_book/index?num=" + this.value + '&Sid=' + this.$parent.Sid +
							'&id=' + this.info.id + '&ptt=' + 0
					})
				}).catch(err => {})

			},
		


		}
	}
</script>

<style lang="scss">
	.opti {
		opacity: 0.6;
	}

	.row {
		display: flex;
		flex-wrap: wrap;
	}

	.btn {
		padding: 0 20rpx;
		line-height: 66rpx;
		background: #F7F7F7;
		border-radius: 60rpx;
		text-align: center;
		color: #999999;
		margin-right: 20rpx;
		margin-bottom: 20rpx;
		min-width: 150rpx;
	}

	.change {
		background: #628DFF;
		color: #FFFFFF;
		opacity: 1;
		transition: all 0.3s
	}
</style>
